import Sortable from 'sortablejs'

// 表格排序
export const initSortable = (tableRef, data, cb) => {
  let tbody = document.querySelector('.el-table__body-wrapper tbody') as any

  // 如果传了 id，就根据 id 获取表单dom
  if (tableRef.value) {
    tbody = tableRef.value.$el.querySelector('tbody') as any
  }

  // 使用更新后的isSort值创建新的Sortable实例
  new Sortable(tbody, {
    // ms, number 单位：ms，定义排序动画的时间
    handle: '.drag',
    animation: 150,
    // 设置拖拽样式类名
    dragClass: '.drop-dragClass',
    // 设置拖拽停靠样式类名
    ghostClass: '.drop-ghostClass',
    // 设置选中样式类名
    chosenClass: '.drop-chosenClass',
    onStart(evt) {
      // 开始拖拽出发该函数
      evt.stopPropagation()
      evt.originalEvent.stopPropagation()
    },
    onEnd(evt: any) {
      console.log('排序', evt)
      // 通过index更改数据，获取拖拽排序之后的数据
      const changeData = data.splice(evt.oldIndex, 1)
      data.splice(evt.newIndex, 0, changeData[0])
      cb(data)
    }
  })
}
